<template>
  <div class="col-md-5 el-col-md-offset-7 reg_main">
    <span class="reg_span">欢迎使用ZTY智能检测平台</span>
    <span class="reg_hint">Welcome to ZTY AI Platform</span>
    <el-form v-loading="loading">
      <div class="reg_box">
        <el-form-item>
          <span class="s1">用户名</span>
          <input class="input_box" v-model="registerForm.username"/>
        </el-form-item>

        <el-form-item>
          <span class="s2">密码</span>
          <input class="input_box" type="password" v-model="registerForm.password"/>
        </el-form-item>

        <el-form-item>
          <span class="s1">真实姓名</span>
          <input class="input_box" v-model="registerForm.name"/>
        </el-form-item>

        <span class="identify" >
        <el-radio v-model="radio" label="1">医生账户</el-radio>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-radio v-model="radio" label="2">普通账户</el-radio>
      </span>
        <span class="regist_sp" type="primary" @click="register">注册</span>
        <div class="last">
          <span>已有账号？</span>
          <span style="color: #1362FC" @click="goLogin">登录</span>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {request} from "../../api/request";
import Qs from 'qs'

export default {
  name: "Register",
  data() {
    return {
      loading: false,
      defaultHeight: {
        height: ""
      },
      radio: '1',
      registerForm: {
        username: '',
        password: '',
        name: ''
      },
      ruleForm: {

      }
    };
  },
  methods: {
    goLogin() {
      this.$router.push("/user/login")
    },
    register() {
      if(this.registerForm.username === '') {
       this.$message.error('注册用户名未填写');
        return false;
      }
      if(this.registerForm.password === '') {
        this.$message.error('注册密码未填写');
        return false;
      }
      if(this.registerForm.name === '') {
        this.$message.error('注册真实姓名未填写');
        return false;
      }
        if(this.radio === '1') {
          this.loading = true;
          let that = this;
          request({
            method: 'post',
            url: 'user/doctor/register/',
            data: Qs.stringify({
              'username': that.registerForm.username,
              'password': that.registerForm.password,
              'name': that.registerForm.name
            })
          }).then(function (data) {
            data = data.data;
            // console.log(data);
            if(data.code === 200) {
              that.loading = false;
              that.$message.success(data.msg);

              setTimeout(_=> {
                that.$router.push('/user/login');
              }, 400);
            } else {
              that.loading = false;
              that.$message.error(data.msg);
            }
          }).catch(function (err) {
            that.loading = false;
            that.$message.error('注册失败，请重试');
          })
        } else {
          this.$message.info('暂未开放普通用户注册');
        }
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.reg_main {
  position: absolute;
  line-height: 20px;
  background-color: white;
  /*background-color:lavenderblush;*/
  border-radius: 5px;
  margin-top: 3%;
  height: 610px;
  margin-left: 30%;
  box-shadow: 0 0 2.1875rem 0 rgba(154,161,171,0.15);
  text-align: center;
  transistion: .3s;
}
.reg_box {
  /*background-color: lavenderblush;*/
  width: 82%;
  height: 74%;
  margin: 0 auto;
  margin-top: 3%;
}
.reg_span {
  display: block;
  /*background-color: lavenderblush;*/
  height: 24px;
  line-height: 24px;
  margin-top: 10%;
  font-weight: 600;
  letter-spacing: 1px;
  color: black;
}
.reg_hint {
  display: block;
  margin-top: 3px;
  /*background-color: lavender;*/
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  font-weight: 300;
}
.s1 {
  display: block;
  text-align: left;
  /*background-color: lemonchiffon;*/
  margin-top: 10px;
  margin-bottom: 10px;
  color: #969BA0;
  font-weight: 600;
  font-size: 14px;
}
.s2 {
  display: block;
  text-align: left;
  /*background-color: lemonchiffon;*/
  margin-top: 20px;
  margin-bottom: 10px;
  color: #969BA0;
  font-weight: 600;
  font-size: 14px;
}
input {
  background:none;
  outline:none;
  border:none;
}
.input_box {
  width: 100%;
  display: block;
  /*height: 40px;*/
  height: 3.2rem;
  border-radius: 14px;
  border: 1px solid #F2F2F2;
  padding: 10px;
  color: #969BA0;
  font-weight: 400;
  transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
}
.input_box:focus {
  border-color: #1362FC;
}
.identify {
  display: block;
  width: 100%;
  text-align: left;
  height: 70px;
  line-height: 70px;
  /*background-color: lavender;*/
}
.regist_sp {
  display: block;
  letter-spacing: 2px;
  height: 50px;
  line-height: 50px;
  color: white;
  background-color: #1362FC;
  font-weight: 600;
  margin-top: 12px;
  border-radius: 16px;
}
.regist_sp:hover {
  background-color: #034BD9;
  transition: .3s;
}
.last {
  /*background-color: lavender;*/
  padding-top: 10px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 13px;
  color: #969BA0;
}
</style>
